.manus-step-renderer {
  font-family: 'PingFang SC', 'Microsoft YaHei', Arial, sans-serif;
  padding: 8px 0;
  color: #2d3748;

  .manus-step-header {
    margin-bottom: 24px;
    background-color: #fff;
    border-radius: 8px;
    padding: 20px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);

    .header-content {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 16px;

      h3 {
        margin: 0;
        font-size: 18px;
        font-weight: 600;
        color: #1a202c;
      }

      .progress-status {
        padding: 4px 10px;
        background-color: #ebf8ff;
        border-radius: 20px;

        .progress-text {
          font-size: 13px;
          color: #3182ce;
          font-weight: 500;
        }
      }
    }

    .progress-bar {
      margin-top: 8px;
    }
  }

  .step-cards {
    width: 100%;

    .step-card {
      border: 1px solid #e2e8f0;
      border-radius: 8px;
      margin-bottom: 12px;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
      transition: all 0.3s ease;
      overflow: hidden;
      background-color: #fff;

      &.active {
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.07);
        border-color: #cbd5e0;
      }

      .step-header {
        background-color: #f8fafc;

        .step-header-top {
          padding: 14px 18px;
          display: flex;
          justify-content: space-between;
          align-items: center;
          cursor: pointer;
          border-bottom: 1px solid #edf2f7;
          transition: background-color 0.2s ease;

          .step-left {
            display: flex;
            align-items: center;
          }

          &:hover {
            background-color: #edf2f7;
          }

          .step-index {
            color: #4a5568;
            font-weight: 600;
            font-size: 14px;
            padding: 4px 10px;
            background-color: #edf2f7;
            border-radius: 16px;
          }

          .step-dependencies {
            display: flex;
            align-items: center;
            font-size: 13px;
            color: #718096;
            margin-left: 10px;

            .dependencies-icon {
              margin-right: 4px;
              font-size: 14px;
              color: #805ad5;
            }
          }

          .expand-icon {
            width: 20px;
            height: 20px;
            transition: transform 0.3s;
            background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="%234A5568" d="M7 10l5 5 5-5z"/></svg>') no-repeat center;
            opacity: 0.7;

            &.expanded {
              transform: rotate(180deg);
            }
          }
        }

        .step-header-bottom {
          padding: 14px 18px;
          display: flex;
          justify-content: space-between;
          align-items: center;

          .step-name {
            flex: 1;
            font-weight: 500;
            margin-right: 16px;
            color: #2d3748;
            font-size: 15px;
          }

          .status-icon {
            display: flex;
            align-items: center;
            i {
              font-size: 18px;
            }
          }
        }
      }

      .step-content {
        padding: 20px;
        border-top: 1px solid #edf2f7;
        background-color: #fff;

        .step-notes {
          margin-bottom: 16px;
        }

        .step-details {
          margin-top: 12px;
          padding: 12px;
          background-color: #f7fafc;
          border-radius: 6px;
          border-left: 4px solid #90cdf4;

          .details-title {
            font-weight: 600;
            color: #4299e1;
            margin-bottom: 8px;
            font-size: 14px;
          }

          .details-content {
            color: #4a5568;
            font-size: 14px;
            line-height: 1.6;
          }
        }
      }
    }
  }

  .manus-step-footer {
    margin-top: 24px;
    padding: 20px;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);

    .result-title {
      display: flex;
      align-items: center;
      margin-bottom: 16px;
      padding-bottom: 12px;
      border-bottom: 1px solid #edf2f7;

      i {
        color: #3182ce;
        font-size: 18px;
        margin-right: 8px;
      }

      span {
        font-weight: 600;
        color: #2d3748;
        font-size: 16px;
      }
    }

    .manus-step-result {
      margin-top: 0;

      // 为 typing-html 组件的内容添加样式
      ::ng-deep {
        h1, h2, h3, h4, h5, h6 {
          margin-top: 24px;
          margin-bottom: 16px;
          font-weight: 600;
          line-height: 1.25;
          color: #1a202c;
        }

        h1 {
          font-size: 24px;
          border-bottom: 1px solid #edf2f7;
          padding-bottom: 8px;
        }

        h2 {
          font-size: 20px;
          border-bottom: 1px solid #edf2f7;
          padding-bottom: 6px;
        }

        p {
          margin-bottom: 16px;
          line-height: 1.7;
          color: #4a5568;
        }

        ul, ol {
          padding-left: 2em;
          margin-bottom: 16px;
          color: #4a5568;
        }

        li {
          margin-bottom: 4px;
        }

        code {
          padding: 0.2em 0.4em;
          background: #edf2f7;
          border-radius: 3px;
          font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
          font-size: 0.9em;
          color: #2d3748;
        }

        pre {
          padding: 16px;
          overflow: auto;
          background-color: #f7fafc;
          border-radius: 6px;
          line-height: 1.45;
          font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
          margin-bottom: 16px;

          code {
            background: transparent;
            padding: 0;
          }
        }

        blockquote {
          padding: 0 1em;
          color: #718096;
          border-left: 0.25em solid #e2e8f0;
          margin: 0 0 16px 0;
        }

        table {
          border-collapse: collapse;
          width: 100%;
          margin-bottom: 16px;

          th, td {
            padding: 8px 12px;
            border: 1px solid #e2e8f0;
          }

          th {
            background: #f7fafc;
            font-weight: 600;
          }

          tr:nth-child(even) {
            background-color: #f9fafb;
          }
        }
      }
    }
  }

  .status-icon {
    i {
      &.success {
        color: #48bb78;
        font-size: 18px;
      }

      &.failed {
//         color: #f56565;
        color: #ecc94b;
        font-size: 18px;
      }

      &.waiting {
        color: #a0aec0;
        font-size: 18px;
      }

      &.processing {
        color: #4299e1;
        font-size: 18px;
      }
    }
  }
}
